<template>
  <div>
    <canvas ref="canvasRef" width='1024' height='720' style='border: 1px solid'></canvas>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {LGraph, LGraphCanvas, LiteGraph} from "litegraph.js";

const canvasRef = ref(null)

class AddNode {
  constructor(props) {
    this.addInput("A", "number");
    this.addInput("B", "number");
    this.addOutput("A+B", "number");
    this.properties = {precision: 1};
  }

  title = '加'

  onExecute() {
    var A = this.getInputData(0);
    if (A === undefined)
      A = 0;
    var B = this.getInputData(1);
    if (B === undefined)
      B = 0;
    this.setOutputData(0, A + B);
  }
}

LiteGraph.registerNodeType("basic/sum_class", AddNode);
onMounted(() => {
  let graph = new LGraph();
  let canvas = new LGraphCanvas(canvasRef.value, graph);
  let node_const = LiteGraph.createNode("basic/const");
  node_const.pos = [200, 200];
  graph.add(node_const);
  node_const.setValue(4.5);


  let node_const2 = LiteGraph.createNode("basic/const");
  node_const2.pos = [200, 300];
  graph.add(node_const2);
  node_const2.setValue(4.5);



  let node_add = LiteGraph.createNode("basic/sum_class");
  node_add.pos = [500, 250];
  graph.add(node_add);
  node_const.connect(0, node_add, 0);
  node_const2.connect(0, node_add, 1);


  let node_watch = LiteGraph.createNode("basic/watch");
  node_watch.pos = [750, 300];
  graph.add(node_watch);
  node_add.connect(0, node_watch, 0);
  graph.start()
})
</script>